<template>
  <div>
    <!--  填写国内运单号弹窗  -->
    <el-dialog
      title="编辑采购凭证信息"
      :visible.sync="open"
      width="500px"
      :before-close="close">
      <div v-if="isCommission">
        <div v-for="(item,index) in formList" :key="index">
          <el-form size="small" :model="item" :rules="rules" ref="formRef" label-width="120px">
            <el-form-item label="购买凭证：" prop="proof">
              <image-upload v-model="item.proof" :is-show-tip="false" width="50px"
                            height="50px"/>
            </el-form-item>
            <el-form-item label="采购价格：" prop="purchasePrice">
              <el-input size="small" v-model="item.purchasePrice" type="number" placeholder="请输入采购价格"/>
            </el-form-item>
            <el-form-item label="货代费用：" prop="freightForwardingFee">
              <el-input size="small" v-model="item.freightForwardingFee" type="number" placeholder="请输入货代费用"/>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-else>
        <el-form size="small" :model="form" :rules="rules" ref="formRef" label-width="120px">
          <el-form-item label="购买凭证：" prop="proof">
            <image-upload v-model="form.proof" :is-show-tip="false" width="50px"
                          height="50px"/>
          </el-form-item>
          <el-form-item label="采购价格：" prop="purchasePrice">
            <el-input size="small" v-model="form.purchasePrice" type="number" placeholder="请输入采购价格"/>
          </el-form-item>
          <el-form-item label="货代费用：" prop="freightForwardingFee">
            <el-input size="small" v-model="form.freightForwardingFee" type="number" placeholder="请输入货代费用"/>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm()">确 定</el-button>
        <el-button @click="close('cancel')">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {uploadPurchaseProof} from "@/api/order/supplementOrder";

export default {
  name: 'order-list',
  props: {
    voucherInfo: {
      type: Object / Array,
      // default: {} || []
    },
    isCommission: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String / Number
    },
    childOrderId: {
      type: String / Number
    }
  },
  data() {
    return {
      open: true,
      form: {},//国内运单号信息
      rules: { // 线上发货表单校验
        proof: [{required: true, message: '请上传凭证', trigger: 'change'}],
        purchasePrice: [{required: true, message: '价格不能为空', trigger: 'blur'}],
        freightForwardingFee: [{required: true, message: '货代费用不能为空', trigger: 'blur'}]
      },
      formList: [],
    }
  },
  mounted() {
    this.getVoucherInfo()
  },
  methods: {
    // 获取已上传的凭证和运单号信息
    getVoucherInfo() {
      if (this.voucherInfo) {
        if (this.isCommission) {
          console.log('typeof this.voucherInfo', this.voucherInfo)
          for (let i = 0; i < this.voucherInfo.length; i++) {
            this.formList.push({
              proof: this.voucherInfo[i].proof,
              purchasePrice: this.voucherInfo[i].purchasePrice,
              orderId: this.orderId,
              childOrderId: this.voucherInfo[i].childOrderId,
              freightForwardingFee: this.voucherInfo[i].freightForwardingFee ? this.voucherInfo[i].freightForwardingFee : 0
            })
          }
          console.log('this.formList', this.formList)
        } else {
          this.form = {
            proof: this.voucherInfo.proof,
            purchasePrice: this.voucherInfo.purchasePrice,
            childOrderId: this.childOrderId,
            orderId: this.orderId,
            freightForwardingFee: this.voucherInfo.freightForwardingFee
          }
        }
      } else {
        this.form = {
          proof: undefined,
          purchasePrice: undefined,
          childOrderId: this.childOrderId,
          orderId: this.orderId,
          freightForwardingFee: 0
        }
      }
    },
    // 确定国内运单号
    confirm() {
      // let data = this.isCommission ? this.formList : this.form
      console.log('this.formList', this.formList)
      if (this.isCommission) {
        uploadPurchaseProof(this.formList).then(res => {
          this.$message.success(res.msg)
          this.close()
        })
      } else {
        this.$refs['formRef'].validate((valid) => {
          if (valid) {
            let data = [this.form]
            uploadPurchaseProof(data).then(res => {
              this.$message.success(res.msg)
              this.close()
            })
          }
        })
      }
    },
    // 关闭线上发货弹窗
    close(type) {
      this.$emit('closePurchaseVoucherModal', false, type)
    },
  }
}
</script>
<style scoped>
.el-divider__text {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
</style>
